<template>
  <div>
    <navigationBar/>
    <div class="play">
      <div class="play-top">
        <div class="play-top-left">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>视频学习</el-breadcrumb-item>
            <el-breadcrumb-item>视频详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="play-top-right">
          <div class="play-top-right-item play-top-right-item-left">
            <i class="iconfont icon-31fanhui1"></i>
            <span>前一个</span>
          </div>
          <div class="play-top-right-item play-top-right-item-right">
            <span>下一个</span>
            <i class="iconfont icon-31fanhui2"></i>
          </div>
        </div>
      </div>

      <div class="play-content">
        <div class="play-content-side">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="plan in coursePlan" :title="plan.pname" :name="plan.id">
              <div v-for="child in plan.children" @click="getVideoId(child.id)">{{ child.pname }}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="play-content-main">
          <div class="main">
            <div class="main-play">
              <div class="main-play-head">
                <h2>自定义函数</h2>
              </div>
              <div class="main-play-head-b">
                <div class="item">
                  <span class="icon"><i class="iconfont icon-zhuyishixiang" style="color: #0056d2"></i></span>
                  <span>收藏</span>
                </div>
                <div class="item" @click="dialogVisible = true">
                  <span class="icon"><i class="iconfont icon-taolunqu" style="color: #0056d2"></i></span>
                  <span>评论</span>
                </div>
              </div>
            </div>
            <div class="main-playing">
              <!--            <router-view></router-view>-->
              <player ref="player" v-if="showPlayer" :vid="vid" :playauth="playauth"></player>
            </div>
          </div>
        </div>
        <el-dialog
            title="发表评论"
            :visible.sync="dialogVisible"
            width="25%"
            :before-close="handleClose">
          <el-form ref="form" :model="form" label-width="60px">
            <el-form-item label="评论">
              <el-input type="textarea" v-model="form.comments"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
         </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import navigationBar from "@/components/navigationBar/navigationBar";
import player from './player.vue'
import myAxios from "../../api/myAxios";
import {getVideoAuth, getVideoByPlanId} from "../../api";

export default {
  name: 'play',
  components: {
    player,
    navigationBar
  },
  data() {
    return {
      activeNames: '',
      dialogVisible: false,
      coursePlan: [],
      form: {
        comments: ''
      },
      courseId: '4028e58161bd3b380161bd3bcd2f0000',
      currentPlanId: '2c9100107cdf8174017cdfb86f110004',
      vid: '',
      playauth: '',
      showPlayer: false
    }
  },
  methods: {
    handleChange() {

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
    },
    async getCoursePlan() {
      this.courseId = this.$route.params.courseId ?? '';
      console.log(this.courseId)
      let res = await myAxios.get('/api/edu/course/course_plan/list/' + this.courseId)
      if (res.success) {
        this.coursePlan = res.data.children
        this.activeNames = res.data.children[0].id
      }
    },
    async getVideoId(currentPlanId) {
      this.showPlayer = false
      let res = await getVideoByPlanId(currentPlanId)

      if (res.success) {
        this.vid = res.data.videoSourceId
      } else {
        this.$message.error('获取视频ID信息失败')
        return
      }
      await this.getPlayAuth()
    },
    async getPlayAuth() {
      let res = await getVideoAuth(this.vid)
      if (res.success) {
        this.playauth = res.data
        this.showPlayer = true;
      }
    }
  },
  async mounted() {
    await this.getVideoId(this.currentPlanId)
    if (this.vid == null) {
      this.vid = ''
      this.playauth = ''
    }

  },
  async created() {
    await this.getCoursePlan()
  }
}
</script>

<style scoped lang="scss">
@import "learner";
</style>
